// ES5 语法
var React = require('react')
var Reactnative = require('react-native');
var Icon = require('react-native-vector-icons/Ionicons');
var Video = require('react-native-video').default;

var Component = React.Component;
var AppRegistry = Reactnative.AppRegistry;
var StyleSheet = Reactnative.StyleSheet
var Text = Reactnative.Text
var View = Reactnative.View


var Dimensions = Reactnative.Dimensions
var width = Dimensions.get('window').width
//第一个组件组件
var Detail =  React.createClass({
  getInitialState(){
    var data = this.props.data;
    console.log(data)
    return {
      data:data,
      rate:0,
      muted:false,
      resizeMode:'cover',
      repeat:false
    }
  },
  _backToList(){
    this.props.navigator.pop()
  },
  _onLoadStart(){
    console.log('开始加载视频')
  },
  _onLoad(){
    console.log('加载视频')
  },
  _onProgress(data){
    console.log('加载onProgress')
  },
  _onEnd(){
    console.log('加载结束')
  },
  _onError(){
    console.log('加载错误')
  },
  render:function(){
    var data = this.props.data
    return(
      <View style={styles.container}>
        <Text onPress={this._backToList}>详情页面</Text>
        <View style={styles.videoBox}>
          <Video
            ref='videoPlayer'
            source={{uri: data.video}}
            style={styles.video}
            volume={5}
            paused={false}
            rate={this.state.rate}
            muted={this.state.muted}
            resizeMode={this.state.resizeMode}
            repeat={this.state.repeat}
            onLoadStart={this._onLoadStart}
            onLoad={this._onLoad}
            onProgress={this._onProgress}
            onEnd={this._onEnd}
            onError={this._onError} />
        </View>
      </View>
    )
  }         
}) 

 var styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#F5FCFF',
    },
    videoBox: {
      width:width,
      height:360,
      backgroundColor:'#000',
    },
    video:{
      width:width,
      height:360,
      backgroundColor:'#000',
    }
  });

 module.exports =  Detail